<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta name="renderer" content="webkit" />
    <title>blog_index</title>
    <meta name="keywords" content="harry的博客">
    <meta name="description" content="harry的博客">
    <link rel="stylesheet" href="../bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <link href="css/base.css" rel="stylesheet" type="text/css">
    <script src="../bootstrap-3.4.1-dist/js/jquery-3.6.1.js"></script>
    <script src="../bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
    <script src="./js/vue.js"></script>
</head>



<style>
    .carousel-example-generic {
        height: 80px;
    }

    .header {
        position: relative;
    }

    #app {
        position: absolute;
        right: 0;
        top: 10px;
        width: 250px;
        height: 50px;
        border: 1px solid gray;
    }

    #app input {
        width: 85%;
        outline: none;
        border: 0;
        color: rgb(141, 131, 131);
        height: 47px;
        position: absolute;
        text-indent: 1em;
    }

    #app span {
        font-size: 20px;
        position: absolute;
        right: 8px;
        top: 15px;
    }
</style>

<body>

    <div class="head_box">
        <div class="header">
            <div class="header_logo">
                <a href="index.html">
                    <h2>harryの博客|</h2>
                </a>
            </div>
            <div class="header_nav">
                <ul class="clearfix">
                    <li><a href="list.html">个人博客分享</a></li>
                    <li class="have_second">
                        <a href="list.html">csdn学习笔记分享</a>
                        <ul class="nav_second">
                            <i></i>
                            <li><a href="https://blog.csdn.net/weixin_46376562/category_11895630.html">flink</a></li>
                            <li><a href="https://blog.csdn.net/weixin_46376562/category_11210185.html">spark</a></li>
                            <li><a href="https://blog.csdn.net/weixin_46376562/category_11210186.html">hadoop</a></li>
                        </ul>
                    </li>
                    <li><a href="list.html">我的博文</a></li>
                    <li><a href="about_me.html">关于我</a></li>
                </ul>
            </div>
            <div id="app">
                <input type="search" placeholder="输入搜索关键词" v-model="key" @keyup.enter="clicksearch">
                <a :href="hrf" ref="search"><span class="glyphicon glyphicon-search"></span></a>
            </div>

        </div>

    </div>

    <span id="flag2"></span>

    <div class="article_box clearfix">
        <div class="left">
            <div class="article_box_one">
                <div class="index_article_title clearfix">
                    <h3>最新文章</h3>
                    <a href="list.html">更多></a>
                </div>
                <ul class="index_article">
                    <li class="clearfix article_list">

                        <a href="article.html" class="article_list_img">
                            <img src="img/blog.png">
                        </a>
                        <h3>Maxwell 概述</h3>
                        <p>它是一个应用程序，可以读取MySQL
                            binlogs并将行更新作为JSON写入Kafka、Kinesis或其他流媒体平台。Maxwell的操作开销很低，只需要mysql和一个写入位置。它的常见用例包括ETL、缓存构建/过期、度量收集、搜索索引和服务间通信。Maxwell为您提供了活动资源的一些好处，而无需重新构建整个平台。官网地址：[http://maxwells-daemon.io/](http://maxwells-daemon.io/)
                        </p>


                        <div class="article_list_link">
                            <span class="article_list_count">
                                <i class="see_count"></i><span class="glyphicon glyphicon-eye-open"></span>
                                查看次数:666
                            </span>

                            <span class="article_list_like">


                                <i class="like_count"></i><span class="glyphicon glyphicon-heart"></span>
                                喜欢次数:666


                            </span>
                            <a href="article.html">查看详细+</a>
                        </div>

                    </li>
                    <li class="clearfix article_list">

                        <a href="article.html" class="article_list_img">
                            <img src="img/blog.png">
                        </a>

                        <h3>Maxwell 概述</h3>
                        <p>它是一个应用程序，可以读取MySQL
                            binlogs并将行更新作为JSON写入Kafka、Kinesis或其他流媒体平台。Maxwell的操作开销很低，只需要mysql和一个写入位置。它的常见用例包括ETL、缓存构建/过期、度量收集、搜索索引和服务间通信。Maxwell为您提供了活动资源的一些好处，而无需重新构建整个平台。官网地址：[http://maxwells-daemon.io/](http://maxwells-daemon.io/)
                        </p>


                        <div class="article_list_link">
                            <span class="article_list_count">
                                <i class="see_count"></i><span class="glyphicon glyphicon-eye-open"></span>
                                查看次数:666
                            </span>

                            <span class="article_list_like">


                                <i class="like_count"></i>
                                <span class="glyphicon glyphicon-heart"></span>
                                喜欢次数:666


                            </span>
                            <a href="article.html">查看详细+</a>
                        </div>

                    </li>
                    <li class="clearfix article_list">

                        <a href="article.html" class="article_list_img">
                            <img src="img/blog.png">
                        </a>

                        <h3>Maxwell 概述</h3>
                        <p>它是一个应用程序，可以读取MySQL
                            binlogs并将行更新作为JSON写入Kafka、Kinesis或其他流媒体平台。Maxwell的操作开销很低，只需要mysql和一个写入位置。它的常见用例包括ETL、缓存构建/过期、度量收集、搜索索引和服务间通信。Maxwell为您提供了活动资源的一些好处，而无需重新构建整个平台。官网地址：[http://maxwells-daemon.io/](http://maxwells-daemon.io/)
                        </p>


                        <div class="article_list_link">
                            <span class="article_list_count">
                                <i class="see_count"></i><span class="glyphicon glyphicon-eye-open"></span>
                                查看次数:666
                            </span>

                            <span class="article_list_like">


                                <i class="like_count"></i>
                                <span class="glyphicon glyphicon-heart"></span>
                                喜欢次数:666


                            </span>
                            <a href="article.html">查看详细+</a>
                        </div>

                    </li>
                    <li class="clearfix article_list">

                        <a href="article.html" class="article_list_img">
                            <img src="img/blog.png">
                        </a>

                        <h3>Maxwell 概述</h3>
                        <p>它是一个应用程序，可以读取MySQL
                            binlogs并将行更新作为JSON写入Kafka、Kinesis或其他流媒体平台。Maxwell的操作开销很低，只需要mysql和一个写入位置。它的常见用例包括ETL、缓存构建/过期、度量收集、搜索索引和服务间通信。Maxwell为您提供了活动资源的一些好处，而无需重新构建整个平台。官网地址：[http://maxwells-daemon.io/](http://maxwells-daemon.io/)
                        </p>


                        <div class="article_list_link">
                            <span class="article_list_count">
                                <i class="see_count"></i><span class="glyphicon glyphicon-eye-open"></span>
                                查看次数:666
                            </span>

                            <span class="article_list_like">


                                <i class="like_count"></i>
                                <span class="glyphicon glyphicon-heart"></span>
                                喜欢次数:666


                            </span>
                            <a href="article.html">查看详细+</a>
                        </div>

                    </li>
                    <li class="clearfix article_list">
                        <a href="article.html" class="article_list_img">
                            <img src="img/blog.png">
                        </a>
                        <h3>Maxwell 概述</h3>
                        <p>它是一个应用程序，可以读取MySQL
                            binlogs并将行更新作为JSON写入Kafka、Kinesis或其他流媒体平台。Maxwell的操作开销很低，只需要mysql和一个写入位置。它的常见用例包括ETL、缓存构建/过期、度量收集、搜索索引和服务间通信。Maxwell为您提供了活动资源的一些好处，而无需重新构建整个平台。官网地址：[http://maxwells-daemon.io/](http://maxwells-daemon.io/)
                        </p>
                        <div class="article_list_link">
                            <span class="article_list_count">
                                <i class="see_count"></i><span class="glyphicon glyphicon-eye-open"></span>查看次数:666
                            </span>
                            <span class="article_list_like">
                                <i class="like_count"></i><span class="glyphicon glyphicon-heart"></span>喜欢次数:666</span>
                            <a href="article.html">查看详细+</a>
                        </div>
                    </li>
                    <li class="clearfix article_list">
                        <a href="article.html" class="article_list_img">
                            <img src="img/blog.png">
                        </a>
                        <h3>Maxwell 概述</h3>
                        <p>它是一个应用程序，可以读取MySQL
                            binlogs并将行更新作为JSON写入Kafka、Kinesis或其他流媒体平台。Maxwell的操作开销很低，只需要mysql和一个写入位置。它的常见用例包括ETL、缓存构建/过期、度量收集、搜索索引和服务间通信。Maxwell为您提供了活动资源的一些好处，而无需重新构建整个平台。官网地址：[http://maxwells-daemon.io/](http://maxwells-daemon.io/)
                        </p>
                        <div class="article_list_link">
                            <span class="article_list_count">
                                <i class="see_count"></i><span class="glyphicon glyphicon-eye-open"></span>查看次数:666
                            </span>
                            <span class="article_list_like">
                                <i class="like_count"></i><span class="glyphicon glyphicon-heart"></span>喜欢次数:666</span>
                            <a href="article.html">查看详细+</a>
                        </div>
                    </li>
                    <li class="clearfix article_list">
                        <a href="article.html" class="article_list_img">
                            <img src="img/blog.png">
                        </a>
                        <h3>Maxwell 概述</h3>
                        <p>它是一个应用程序，可以读取MySQL
                            binlogs并将行更新作为JSON写入Kafka、Kinesis或其他流媒体平台。Maxwell的操作开销很低，只需要mysql和一个写入位置。它的常见用例包括ETL、缓存构建/过期、度量收集、搜索索引和服务间通信。Maxwell为您提供了活动资源的一些好处，而无需重新构建整个平台。官网地址：[http://maxwells-daemon.io/](http://maxwells-daemon.io/)
                        </p>
                        <div class="article_list_link">
                            <span class="article_list_count">
                                <i class="see_count"></i><span class="glyphicon glyphicon-eye-open"></span>查看次数:666
                            </span>
                            <span class="article_list_like">
                                <i class="like_count"></i><span class="glyphicon glyphicon-heart"></span>喜欢次数:666</span>
                            <a href="article.html">查看详细+</a>
                        </div>
                    </li>

                    <span id="flag"></span>
                </ul>
            </div>


            <div>
                <input type="button" class="more" id="loadmore" value="点击加载更多">
            </div>

        </div>

        <div class="right">
            <div class="self_info right_box">
                <img src="img/self.jpg">
                <div class="self_info_text">
                    <h3>努力的打工仔harry</h3>
                    <div>
                        <p>以彼之长，增长自身</p>
                        <p>有匪君子，如切如磋，如琢如磨。</p>
                        <p>天将降大任于斯人也，必先苦其心志、磨其胫骨、饿其体肤</p>
                    </div>
                    <a href="about_me.html">Read More</a>
                </div>
            </div>
            <div class="self_erweima right_box">
                <h3>微信二维码</h3>
                <div>
                    <img src="img/wechat.jpg">
                </div>
            </div>

            <div class="self_erweima right_box">
                <h3>QQ二维码</h3>
                <div>
                    <img src="img/qq.jpg">
                </div>
            </div>

            <div class="self_zuoyoum right_box">
                <h3>努力学习</h3>

            </div>

            <div class="right_box tuijian_moban">
                <h3>blog推荐</h3>
                <div>
                    <ul>
                        <li><a href="#">最新blog</a></li>
                        <li><a href="#">最新blog</a></li>
                        <li><a href="#">最新blog</a></li>
                        <li><a href="#">最新blog</a></li>
                        <li><a href="#">最新blog</a></li>
                        <li><a href="#">最新blog</a></li>

                    </ul>
                </div>
            </div>

        </div>

    </div>


    <div class="footer_box">
        <div class="footer clearfix">
            <div class="footer_img">
                <ul>
                    <li>
                        <img src="img/qq.jpg">
                        <span>我的QQ</span>
                    </li>
                    <li>
                        <img src="img/wechat.jpg">
                        <span>我的微信</span>
                    </li>
                </ul>
            </div>
            <div class="footer_text">
                <p><i>代码分享社区：</i></p>
                <p><a href="https://gitee.com/chenL_space">码云社区https://gitee.com</a></p>
                <p><a href="https://blog.csdn.net/weixin_46376562?spm=1000.2115.3001.5343">CSDN个人主页</a></p>
                <p>欢迎大家看到喜欢的文章帮忙转发点赞 3153764534@qq.com</p>
            </div>
        </div>

    </div>

    <script>
        var str = '<li class="clearfix article_list">\n' +
            '                    <a href="article.html" class="article_list_img">\n' +
            '                        <img src="img/blog.png">\n' +
            '                    </a>\n' +
            '                    <h3>Maxwell 概述</h3>\n' +
            '                    <p>它是一个应用程序，可以读取MySQL binlogs并将行更新作为JSON写入Kafka、Kinesis或其他流媒体平台。Maxwell的操作开销很低，只需要mysql和一个写入位置。它的常见用例包括ETL、缓存构建/过期、度量收集、搜索索引和服务间通信。Maxwell为您提供了活动资源的一些好处，而无需重新构建整个平台。官网地址：[http://maxwells-daemon.io/](http://maxwells-daemon.io/)</p>\n' +
            '                    <div class="article_list_link">\n' +
            '                            <span class="article_list_count">\n' +
            '                                <i class="see_count"></i><span class="glyphicon glyphicon-eye-open"></span>查看次数:666\n' +
            '                            </span>\n' +
            '                        <span class="article_list_like">\n' +
            '                                <i class="like_count"></i><span class="glyphicon glyphicon-heart"></span>喜欢次数:666</span>\n' +
            '                        <a href="article.html">查看详细+</a>\n' +
            '                    </div>\n' +
            '                </li>'
        var span = document.querySelector('#flag')
        var btn = document.querySelector('#loadmore')
        btn.onclick = function () {
            span.insertAdjacentHTML("beforebegin", str)
        }

        var banner = '<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="3000">\n' +
            '    <!-- Indicators -->\n' +
            '    <ol class="carousel-indicators" data-data-interval="1000">\n' +
            '        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>\n' +
            '        <li data-target="#carousel-example-generic" data-slide-to="1"></li>\n' +
            '        <li data-target="#carousel-example-generic" data-slide-to="2"></li>\n' +
            '    </ol>\n' +
            '\n' +
            '    <!-- Wrapper for slides -->\n' +
            '    <div class="carousel-inner" role="listbox">\n' +
            '        <div class="item active">\n' +
            '            <img src="./img/ban.jpg" alt="...">\n' +
            '            <div class="carousel-caption">\n' +
            '                \n' +
            '            </div>\n' +
            '        </div>\n' +
            '        <div class="item">\n' +
            '            <img src="./img/ban.jpg" alt="...">\n' +
            '            <div class="carousel-caption">\n' +
            '                \n' +
            '            </div>\n' +
            '        </div>\n' +
            '        <div class="item">\n' +
            '            <img src="./img/ban.jpg" alt="...">\n' +
            '            <div class="carousel-caption">\n' +
            '                \n' +
            '            </div>\n' +
            '        </div>\n' +
            '    </div>\n' +
            '</div>'

        document.querySelector('#flag2').insertAdjacentHTML("beforebegin", banner)

        new Vue({
            el: '#app',
            data: {
                key: '',
                hrf: ''
            },
            watch: {
                key(newQuestion, oldQuestion) {
                    console.log(newQuestion);
                    this.hrf = 'https://www.baidu.com/s?wd=' + this.key
                }
            },
            methods: {
                clicksearch(){
                    alert('请不要回车，需要点击搜索，方可进行baidu搜索')
                }
            },
        })

    </script>

</body>

</html>
